import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 2.15
import QtQml 2.15
import '../component'

RowLayout {
	property int pageDefalutIndex: 1
	property var qmlList: [
		{icon: 'recommend-white', value: '推荐内容', qml: 'DetailRecommendPageView'},
		{icon: 'cloud-white', value: '搜索', qml: 'DetailSearchPageView'},
		{icon: 'local-white', value: '本地音乐', qml: 'DetailLocalPageView'},
		{icon: 'history-white', value: '播放历史', qml: 'DetailHistoryPageView'},
		{icon: 'favorite-big-white', value: '我喜欢的', qml: 'DetailFavoritePageView'},
		// {icon: 'favorite-big-white', value: '专辑歌单', qml: 'DetailPlayListPageView'}
	]
	spacing: 0
	Frame {
		Layout.preferredWidth: 200
		Layout.fillHeight: true
		background: Rectangle {
			color: Qt.color("#AA00AAAA")
		}
		padding: 0
		
		ColumnLayout {
			anchors.fill: parent
			
			Item {
				Layout.fillWidth: true
				Layout.preferredHeight: 150
				MusicRoundImage {
					// source:'https://blog.shenjianl.cn/aisi-coding/logo.svg'
					source: '/resources/icon/player'
					anchors.centerIn: parent
					height: 100
					width: 100
					radius: 100
				}
			}
			ListView {
				id: menuView
				Layout.fillWidth: true
				Layout.fillHeight: true
				model: ListModel {
					id: menuViewModel
				}
				delegate: menuViewDelegate
				
				highlight: Rectangle {
					color: Qt.color('#AA73A7AB')
				}
				// highlightMoveDuration:0
				// highlightResizeDuration:0
			}
		}
		
		Component {
			id: menuViewDelegate
			Rectangle {
				id: menuViewDelegateItem
				height: 50
				width: 200
				color: Qt.color('#AA00AAAA')
				RowLayout {
					anchors.fill: parent
					anchors.centerIn: parent
					spacing: 15
					Item {
						width: 30
					}
					Image {
						source: '/resources/icon/' + model.icon
						Layout.preferredWidth: 20
						Layout.preferredHeight: 20
					}
					Text {
						text: model.value
						Layout.fillWidth: true
						height: 50
						font.family: window.fontFamily
						font.pixelSize: 12
						color: Qt.color('#FFFFFF')
					}
				}
				
				MouseArea {
					anchors.fill: parent
					hoverEnabled: true
					onEntered: {
						color = Qt.color('#AA73A7AB')
					}
					onExited: {
						color = Qt.color('#AA00AAAA')
					}
					// onPressedChanged: {
					// 	menuViewDelegateItem.color = pressed ? Qt.color('#AA73A7AB') : Qt.color('#AA00AAAA')
					// }
					onClicked: {
						var nowLoader = repeater.itemAt(menuViewDelegateItem.ListView.view.currentIndex)
						nowLoader.visible = false
						menuViewDelegateItem.ListView.view.currentIndex = index
						var nextLoader = repeater.itemAt(index)
						nextLoader.visible = true
						nextLoader.source = qmlList[index].qml + '.qml'
					}
				}
			}
		}
		
		Component.onCompleted: {
			menuViewModel.append(qmlList)
			var loader = repeater.itemAt(0)
			loader.visible = true
			loader.source = qmlList[pageDefalutIndex].qml + '.qml'
			menuView.currentIndex = pageDefalutIndex
		}
	}
	
	
	Repeater {
		id: repeater
		model: qmlList.length
		Loader {
			visible: false
			Layout.fillWidth: true
			Layout.fillHeight: true
		}
	}
}
